<template>
  <div class="dashboard-container">
    <div class="app-container">
      <hearder @search="search">
        <template #left-search>
          <el-form-item label="点位搜索：">
            <el-input v-model="searchRegion.name" placeholder="请输入" clearable />
          </el-form-item>
        </template>
        <template #right-search>
          <el-form-item class="arder-search" label="区域搜索：">
            <el-select v-model="searchRegion.regionId" placeholder="请输入" clearable>
              <el-option
                v-for="item in selectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </template>
      </hearder>
      <!-- table主体 -->
      <tableMain :data-list="dataList" :create-dialog-show.sync="setDialogShow" :pager-info="searchRegion" @upPage="upPage" @nextPage="nextPage">
        <template #tableBody>
          <el-table-column
            type="index"
            label="序号"
            width="100"
          />
          <el-table-column
            prop="name"
            label="点位名称"
            width="270"
          />
          <el-table-column
            prop="region.name"
            label="所在区域"
            width="270"
          />
          <el-table-column
            prop="businessType.name"
            label="商圈类型"
            width="270"
          />
          <el-table-column
            prop="ownerName"
            label="合作商"
            width="270"
          />
          <el-table-column
            prop="addr"
            label="详细地址"
            width="270"
          />
          <el-table-column label="操作" width="220">
            <template slot-scope="{row}">
              <span class="info" @click="getInfo(row)">查看详情</span>
              <span class="info" @click="setInfo(row)">修改</span>
              <span class="del" @click="deleteIsMark()">删除</span>
            </template>
          </el-table-column>
        </template>
      </tableMain>
      <!-- 获取详细信息弹窗 -->
      <getDialog v-if="getDialogShow" :get-dialog-show.sync="getDialogShow" title="点位详情">
        <template #body>
          <el-table
            stripe
            :data="areaInfo"
            :header-cell-style="{background:'#f3f6fb'}"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
            />
            <el-table-column
              prop="innerCode"
              label="机械编号"
              width="158"
            />
            <el-table-column

              label="设备状态"
              width="156"
            >
              <template slot-scope="{row}">
                <span>{{ vmStatus(row.vmStatus) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="lastSupplyTime"
              label="最后一次供货时间"
              width="157"
            />
          </el-table>
        </template>
      </getDialog>
      <!-- 修改区域弹窗 -->
      <setDialog v-if="setDialogShow" class="setDialog" :set-dialog-show.sync="setDialogShow" title="修改点位" @setInfoIsOk="setInfoIsOk">
        <template #body>
          <el-form ref="setForm" :rules="setRules" :model="setForm">
            <el-form-item class="setAreaF-item" label="点位名称：" prop="name">
              <el-input
                v-model="setForm.name"
                class="setAreaF"
                show-word-limit
                placeholder="请输入"
                maxlength="15"
              />
            </el-form-item>
            <el-form-item class="setAreaF-item" label="所在区域：" prop="regionId">
              <el-select v-model="setForm.regionId" placeholder="请选择">
                <el-option
                  v-for="item in selectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="setAreaF-item" label="所属商圈：" prop="businessId">
              <el-select v-model="setForm.businessId" placeholder="请选择">
                <el-option
                  v-for="item in BusinessList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="setAreaF-item hezuo" label="归属合作商：" prop="ownerId">
              <el-select v-model="setForm.ownerId" placeholder="请选择">
                <el-option
                  v-for="item in PartnersLsit"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="setAreaF-item" label="详细地址：" prop="areaCode">
              <el-cascader
                v-model="cityArray"
                :options="options"
                :props="cascaderProps"
              />
            </el-form-item>
            <el-form-item class="setAreaF-item" label="备注说明：" prop="addr">
              <el-input
                v-model="setForm.addr"
                type="textarea"
                show-word-limit
                class="setAreaF"
                placeholder="请输入"
                maxlength="40"
                :rows="3"
              />
            </el-form-item>
          </el-form>
        </template>
      </setDialog>
    </div>
  </div>
</template>

<script>
import hearder from '@/components/searchHearder.vue'
import tableMain from '@/components/tableMain.vue'
import getDialog from '../component/getDialog.vue'
import setDialog from '../component/setDialog.vue'
import axios from 'axios'
import {
  getZoneListApi,
  getPTInfoApi,
  getPTDetailsApi,
  getBusinessType,
  getPartnersInfo,
  setPTDetailsApi,
  addPTDetailsApi
} from '@/api'
export default {
  components: {
    hearder,
    tableMain,
    getDialog,
    setDialog
  },
  data() {
    return {
      searchRegion: {
        pageIndex: '1', // 当前页码
        pageSize: '10', // 每页数据
        name: '', // 收索名称
        totalCount: '0', // 总数据条数f
        totalPage: '1', // 总页数
        regionId: '' // 点位id
      },
      // 新建
      createDialogShow: false,
      // 表单数据
      dataList: [],
      // 下拉列表名称
      selectList: [],
      // 点位详细弹出框
      getDialogShow: false,
      // 修改点位详细弹出框
      setDialogShow: false,
      // 点位详情列表
      areaInfo: [],
      // 修改点位列表
      setForm: {
        name: '', // 区域名称
        addr: '', // 详细地址
        areaCode: '', // 最后一级区域Id
        createUseId: 1, // 	创建人Id
        regionId: '', // 	所属区域Id
        businessId: '', // 所属商圈Id
        ownerId: '', // 合作商Id
        ownerName: '' // 合作商名称
      },
      // 修改点位的id
      vmCount: '',
      // 绑定级联数据表
      cityArray: [],
      // 修改点位验证规则
      setRules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        regionId: [{ required: true, message: '请选择', trigger: 'blur' }],
        businessId: [{ required: true, message: '请选择', trigger: 'blur' }],
        ownerId: [{ required: true, message: '请选择', trigger: 'blur' }],
        areaCode: [{ required: true, message: '请选择', trigger: 'blur' }],
        addr: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      // 商圈列表
      BusinessList: [],
      // 合作商列表
      PartnersLsit: [],
      // 级联配置
      cascaderProps: {
        label: 'name',
        value: 'code',
        checkStrictly: true
      },
      // 级联列表
      options: []
    }
  },
  computed: {
    vmStatus: () => (val) => {
      if (val === 0) {
        return '未投放'
      } else if (val === 1) {
        return '运营'
      } else {
        return '撤机'
      }
    }
  },
  watch: {
    'setForm.ownerId'(newVal) {
      const newArr = this.PartnersLsit.filter(item => {
        return item.id === newVal
      })
      this.setForm.ownerName = newArr[0].name
    },
    // 'setForm.regionId'(newVal) {
    //   const newArr = this.selectList.filter(item => {
    //     return item.id === newVal
    //   })
    //   this.setForm.name = Number(newArr[0]?.name)
    // },
    cityArray(newValue) {
      this.setForm.areaCode = parseInt(newValue[1])
    }
  },
  created() {
    this.getPTInfoApi()
    this.getZoneListApi()
  },
  mounted() {
    this.getCityList()
  },
  methods: {
    search() {
      this.getPTInfoApi()
    },
    // 获取表单列表数据
    async getPTInfoApi() {
      const { data } = await getPTInfoApi(this.searchRegion)
      this.dataList = data.currentPageRecords
      this.searchRegion.pageIndex = data.pageIndex
      this.searchRegion.pageSize = data.pageSize
      this.searchRegion.totalCount = data.totalCount
      this.searchRegion.totalPage = data.totalPage
      const res = await getBusinessType()
      this.BusinessList = res.data
      const reg = await getPartnersInfo({
        pageIndex: '1',
        pageSize: '10'
      })
      this.PartnersLsit = reg.data.currentPageRecords
    },
    // 获取下拉菜单
    async  getZoneListApi() {
      const { data } = await getZoneListApi(this.searchRegion)
      this.selectList = data.currentPageRecords
    },
    // 上一页
    upPage() {
      this.searchRegion.pageIndex--
      this.getPTInfoApi()
    },
    // 下一页
    nextPage() {
      this.searchRegion.pageIndex++
      this.getPTInfoApi()
    },
    // 查看详细 点位信息
    async getInfo(row) {
      const { data } = await getPTDetailsApi(row.id)
      this.areaInfo = data
      // this.searchRegion.name = name
      this.getDialogShow = true
    },
    // 修改
    setInfo(data) {
      this.setForm.name = data.name
      this.setForm.addr = data.addr
      this.setForm.areaCode = data.areaCode
      this.setForm.regionId = data.regionId
      this.cityArray = data.areaCode
      this.setForm.businessId = data.businessId
      this.setForm.ownerId = data.ownerId
      this.setForm.ownerName = data.ownerName
      this.vmCount = data.vmCount
      this.setDialogShow = true
    },
    // 确定修改
    async setInfoIsOk() {
      try {
        // 先校验表单
        await this.$refs.setForm.validate()
        // 判断有没有vmCount 如果有为修改
        if (this.vmCount) {
          await setPTDetailsApi(this.vmCount, this.setForm)
          this.$message.success('修改成功!')
          // 更新视图
          this.getZoneListApi()
          this.setDialogShow = false
          this.vmCount = ''
        } else {
          // 新增
          await addPTDetailsApi(this.setForm)
          this.$message.success('新增成功!')
          // 更新视图
          this.getZoneListApi()
          this.setDialogShow = false
        }
      } catch (error) {
        this.$message.error(error.response.data)
      }
    },
    // 删除地址警告
    deleteIsMark() {
      this.$notify({
        title: '提示',
        message: '演示系统，不支持此操作',
        type: 'warning'
      })
    },
    // 获取本地一城市列表数据
    async getCityList() {
      const { data } = await axios.get('/address.json')

      this.options = data
    }
  }
}
</script>

<style scped lang='less'>
.el-input--suffix{
  height: 60px;
}
.setDialog{
  .el-input__inner{
width: 396px;
  }
  .hezuo{
   position: relative;
   left: -14px;
  }
.el-select__caret{
    position: relative;
    top:-10px!important;
  }
}

.arder-search{
  .el-select__caret{
    position: relative;
    top: 0!important;
  }
}
.el-input--suffix{
  height: 60px;
}
.info{
  cursor: pointer;
  color: #5f84ff;
  margin-right:10px;
}
.del{
  cursor: pointer;
  color: #ff5a5a;
}
/deep/.el-icon-warning{
  color: #ff7c0f!important;
}
.areainfo{
  padding-left: 70px;
}
.main-zw{
  height: 30px;
  width: 100%;
}
.setAreaF-item{
 padding-left: 75px ;
.setAreaF{
  width: 396px!important;
}
}
</style>
